<template>
    <view class="container">
        <header-bar :config="config"></header-bar>
        <oreder-header @searchFn="searchFn" @doFilter="doFilter"></oreder-header>
        <tab-bar :tabs="items" nobg="nobg" @clickTab="clickTab" :tabIndex="tabIndex"></tab-bar>
        <view class="main">
            <swiper
                class="swiper product-main-list"
                :style="{ height: listHeight }"
                :current="tabIndex"
                @change="swiperChange">
                <swiper-item v-for="(swiperItem, swiperIndex) in items" :key="swiperIndex">
                    <order-list
                        v-if="loadOk"
                        :ref="'productList_' + swiperIndex"
                        :height="listHeight"
                        :state="swiperItem.state"
                        @showSnewm="showSnewm"
                        :requestData="requestData"></order-list>
                </swiper-item>
            </swiper>
        </view>
        <uni-popup ref="deliveryCode" type="center" :safe-area="false" :maskClick="false">
            <view class="code-pop">
                <view class="code-top">
                    <view class="c-t-title">社区门店</view>
                    <view class="c-t-list">
                        <view
                            ><iconsfont
                                customIcons="icon-yiwancheng"
                                color="#fff"
                                style="margin-right: 8rpx"
                                size="24"></iconsfont
                            >货源直采</view
                        >
                        <view
                            ><iconsfont
                                customIcons="icon-yiwancheng"
                                color="#fff"
                                style="margin-right: 8rpx"
                                size="24"></iconsfont
                            >品质保障</view
                        >
                        <view
                            ><iconsfont
                                customIcons="icon-yiwancheng"
                                color="#fff"
                                style="margin-right: 8rpx"
                                size="24"></iconsfont
                            >便捷省心</view
                        >
                    </view>
                    <image src="/static/img/codebg.png"></image>
                </view>
                <view class="code-info">
                    <uqrcode
                        ref="uqrcode"
                        class="uqrcode"
                        canvas-id="qrcode"
                        :value="popSn"
                        size="448"
                        sizeUnit="rpx"></uqrcode>
                </view>
                <view class="desc">请凭二维码取货</view>
                <view class="desc1">订单编号：{{ popSn }}</view>
                <image src="/static/img/close_one.png" class="closeimg" @click="$refs.deliveryCode.close()"></image>
            </view>
        </uni-popup>
    </view>
</template>

<script>
import { mapMutations, mapState, mapGetters } from "vuex"
import orederHeader from "./order-header.vue"
import orderList from "./order-list.vue"
import tabBar from "@/components/common/tab-bar.vue"
import storage from "@/uni-sub-base/utils/storage.js"
import { getElementHeight } from "@/uni-sub-base/utils/elementUtil.js"
export default {
    components: {
        orederHeader,
        orderList,
        tabBar,
    },
    props: {
        visible: {
            type: Boolean,
            default: false,
        },
        refreshView: {
            type: Boolean,
            default: false,
        },
        isTemp: {
            type: Boolean,
            default: false,
        },
    },
    watch: {
        visible: {
            handler(newVal) {
                if (newVal) {
                    this.setStatusBarStyle("dark")
                    this.getListHeight()
                    this.changeTab()
                }
            },
            immediate: true,
        },
        refreshView(e) {
            if (e) {
                this.changeTab()
            }
        },
        //监听更新
        getUpOrderView(e) {
            this.refresh()
        },
    },
    data() {
        return {
            optEmpty: {
                icon: "/static/img/empty.png", // 图标路径 (建议放入static目录, 如 /static/img/mescroll-empty.png )
                tip: "~ 暂无数据 ~", // 空提示
            },
            isloadding: false,
            tabIndex: 0,
            popSn: "",
            items: [
                {
                    state: 17,
                    title: "待提货",
                },
                {
                    state: 10,
                    title: "已提货",
                },
            ],
            listHeight: "", //list所需高度
            loadOk: false,
            searchKey: "",
            requestData: {
                searchKey: "",
            },
            config: {
                title: "提货管理",
                back: true,
                centerSlot: true,
                barPlaceholder: true,
            },
        }
    },
    computed: {
        ...mapGetters(["getUpOrderView"]),
    },
    onReady() {},
    created() {
        // this.config.back = this.isTemp
    },
    onShow() {},
    mounted() {
        this.getListHeight()
    },
    methods: {
        showSnewm(item) {
            this.popSn = item
            this.$refs.deliveryCode.open()
        },
        changeTab() {
            //判断是要切到哪个tab
            let orderType = storage.getCache("orderType")
            if (orderType) {
                for (var i = 0; i < this.items.length; i++) {
                    let item = this.items[i]
                    if (item.state == orderType) {
                        this.tabIndex = i
                    }
                }
                storage.removeCache("orderType")
            }
            let miniProgramState = storage.getCache("miniProgram")
            if (miniProgramState) {
                this.refresh()
                storage.removeCache("miniProgram")
            }
        },
        getListHeight(element) {
            //获取商品高度
            getElementHeight(this, ".main", (e) => {
                e = this.isTemp ? e : e - 54
                this.listHeight = e + "px"
                this.loadOk = true
            })
        },
        swiperChange(e) {
            let tabIndex = e.detail.current
            this.clickTab(tabIndex)
        },
        //tab切换
        clickTab(index) {
            if (this.tabIndex != index) {
                this.tabIndex = index
            }
        },
        //搜索
        searchFn(searchKey) {
            this.requestData.searchKey = searchKey
            this.refresh()
        },
        //筛选
        doFilter(data) {
            this.requestData.startTime = data.startDate ? data.startDate + "T00:00:00.000Z" : ""
            this.requestData.endTime = data.endDate ? data.endDate + "T23:59:59.000Z" : ""
            this.requestData.orderType = data.selectFilterOrderType
            this.refresh()
        },
        refresh() {
            this.$refs.productList_0[0].refresh(this.requestData)
            this.$refs.productList_1[0].refresh(this.requestData)
        },
    },
}
</script>

<style lang="scss" scoped>
.container {
    display: flex;
    flex-direction: column;
}
.code-pop {
    width: 640rpx;
    background: #ffffff;
    border-radius: 32rpx;
    position: relative;
    .closeimg {
        width: 64rpx;
        height: 64rpx;
        position: absolute;
        bottom: -96rpx;
        left: 50%;
        margin-left: -32rpx;
    }
}
.code-top {
    position: relative;
    height: 208rpx;
    background: $app-color-main;
    border-radius: 32rpx 32rpx 0 0;
    image {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 640rpx;
        height: 114rpx;
    }
}
.c-t-title {
    font-size: 42rpx;
    text-align: center;
    color: #fff;
    padding: 24rpx 0 12rpx 0;
}
.c-t-list {
    display: flex;
    justify-content: center;
    & > view {
        margin: 0 22rpx;
        color: #fff;
        font-size: 22rpx;
    }
}
.code-info {
    position: relative;
    width: 448rpx;
    height: 448rpx;
    background: #ffffff;
    box-shadow: 0px 4rpx 16rpx 0px rgba(0, 0, 0, 0.2);
    border-radius: 16rpx;
    margin: -48rpx auto 0 auto;
    padding: 64rpx;
    .uqrcode {
        width: 448rpx;
        height: 448rpx;
        display: block;
    }
}
.desc {
    text-align: center;
    font-size: 28rpx;
    font-weight: bold;
    padding: 24rpx 0 16rpx 0;
}
.desc1 {
    text-align: center;
    font-size: 28rpx;
    font-weight: bold;
    padding: 0rpx 0 40rpx 0;
}
</style>
